<template>
  <el-dialog v-model="visible" width="350px" @close="onClose">
    <slide-verify
      ref="block"
      :slider-text="text"
      :accuracy="accuracy"
      :imgs="images"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
  </el-dialog>
</template>

<script setup lang="ts">
  // 局部注册组件，需要单独引用组件样式
  // 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
  import { computed, ref } from 'vue';
  import SlideVerify, { SlideVerifyInstance } from 'vue3-slide-verify';
  import 'vue3-slide-verify/dist/style.css';
  import loginCaptcha1 from '@/assets/image/code/code1.png';
  import loginCaptcha2 from '@/assets/image/code/code2.png';
  import loginCaptcha3 from '@/assets/image/code/code3.png';
  import loginCaptcha4 from '@/assets/image/code/code4.png';
  import loginCaptcha5 from '@/assets/image/code/code5.png';

  const msg = ref('');
  const block = ref<SlideVerifyInstance>();
  const text = '向右滑动->';
  const accuracy = 10;
  const images: string[] = [
    loginCaptcha1,
    loginCaptcha2,
    loginCaptcha3,
    loginCaptcha4,
    loginCaptcha5,
  ];

  const props = withDefaults(defineProps<{ dialogVisible: boolean }>(), {
    dialogVisible: false,
  });

  const visible = computed(() => {
    return props.dialogVisible;
  });
  const emit = defineEmits(['success', 'close']);
  const onClose = () => {
    emit('close');
  };
  // const dialogVisible = ref(false);

  const onAgain = () => {
    msg.value = '检测到非人为操作的 try again';
    // 刷新
    block.value?.refresh();
  };

  const onSuccess = (times: number) => {
    emit('success');
    msg.value = `login success, 耗时${(times / 1000).toFixed(1)}s`;
  };

  const onFail = () => {
    msg.value = '验证不通过';
  };

  const onRefresh = () => {
    msg.value = '点击了刷新小图标';
  };
</script>

<style scoped></style>
